<template>
  <div class="model-choose">
    <!-- 系统自带模型 -->
    <div class="options">
      <div class="option">
        <el-space>
          <el-icon>
            <Orange />
          </el-icon>
          <span>系统自带模型</span>
        </el-space>
      </div>
      <!-- 模型列表 -->
      <el-scrollbar max-height="360px">
        <el-row>
          <el-col
            :style="{ textAlign: 'center' }"
            :span="12"
            v-for="model in commonTypeList"
            :key="model.id"
          >
            <el-image
              class="el-img"
              :class="activeModelId === model.id ? 'active-model' : ''"
              :src="model.icon"
              draggable="true"
              @dragstart="(e) => onDragStart(e, model)"
              @drag.prevent="(e) => onDrag(e)"
              @dragend.prevent="onDragEnd"
              fit="cover"
            />
          </el-col>
        </el-row>
      </el-scrollbar>
    </div>
    <!-- 管道模型 -->
    <div class="options">
      <div class="option">
        <el-space>
          <el-icon>
            <SwitchFilled />
          </el-icon>
          <span>管道模型</span>
        </el-space>
      </div>
      <!-- 模型列表 -->
      <el-row>
        <el-col :style="{ textAlign: 'center' }" :span="12">
          <el-tooltip
            effect="dark"
            content="点击模型设置管道端点，按“l”建立连接"
            placement="top"
          >
            <el-button
              :style="{ width: '96%', borderRadius: 0 }"
              @click="addPipe"
              >添加管道</el-button
            >
          </el-tooltip>
        </el-col>
        <el-col :style="{ textAlign: 'center' }" :span="12">
          <el-button
            :style="{ width: '96%', borderRadius: 0 }"
            @click="cancelPipe"
            >取消</el-button
          >
        </el-col>
      </el-row>
    </div>
    <!-- 外部模型 -->
    <div class="options">
      <div class="option">
        <el-space>
          <el-icon>
            <UploadFilled />
          </el-icon>
          <span>外部模型</span>
        </el-space>
      </div>
      <!-- 模型内容 -->
      <div class="file-name">
        <span>当前模型:</span>
        <el-tooltip effect="dark" :content="localModelName" placement="top">
          <b>{{ localModelName }}</b>
        </el-tooltip>
      </div>
      <el-upload
        action=""
        accept=".glb,.obj,.gltf,.fbx,.stl"
        class="file-box"
        :show-file-list="false"
        :auto-upload="false"
        :on-change="onUpload"
      >
        <div class="upload">
          <div class="icon">
            <el-icon :size="44">
              <Plus />
            </el-icon>
            <div>
              <span>请选择(目前仅支持.glb, .obj, .gltf, .fbx, .stl格式)</span>
            </div>
          </div>
        </div>
      </el-upload>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, getCurrentInstance } from "vue";
import { commonTypeList } from "@/assets/deviceTypes/types.js";
import { useMeshEditStore } from "@/stores/modules/model.js";
const { $bus } = getCurrentInstance().proxy;
const meshStore = useMeshEditStore();

// 选择模型
const activeModelId = ref(""); // 当前模型id
//当前本地模型
const localModelName = ref(null);

// 管道
const addPipe = () => {
  $bus.emit("add-pipe");
};
const cancelPipe = () => {
  $bus.emit("cancel-pipe");
};

// 选择本地模型文件
const onUpload = async (file) => {
  localModelName.value = file.name;
  const filePath = URL.createObjectURL(file.raw);
  $bus.emit("model-upload", { path: filePath, position: [0, 10, 0] });
};

const onDragStart = (e, model) => {
  // if (model.id === activeModelId.value) return false;
  activeModelId.value = model.id;

  meshStore.setModelApi(model);
  meshStore.changeDragType("models");
};
const onDrag = (e) => {};
const onDragEnd = () => {};
</script>

<style lang="scss">
.model-choose {
  .el-img {
    width: 145px;
    height: 88px;
    cursor: pointer;
    margin-bottom: 4px;
    box-sizing: border-box;
    opacity: 0.5;
  }
  .active-model {
    border: 3px solid #18c174 !important;
    opacity: 1;
  }
  .file-box {
    padding: 10px 20px;
    color: #8c939d;
    box-sizing: border-box;
    text-align: center;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    .upload {
      width: 228px;
      height: 128px;
      border: 1px dashed #dcdfe6;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 6px;
      .icon {
        span {
          font-size: 14px;
        }
      }
      &:hover {
        border-color: #409eff;
        color: #409eff;
      }
    }
  }
  .file-name {
    color: #fff;
    text-align: center;
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }
}
</style>